<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <style>
        #steps {
        }

        .step-item {
            display: inline-block;
            line-height: 26px;
            position: relative;
            background: #ffffff;
        }

        .step-item-tail {
            width: 100%;
            padding: 0 10px;
            position: absolute;
            left: 0;
            top: 13px;
        }

        .step-item-tail i {
            display: inline-block;
            width: 100%;
            height: 1px;
            vertical-align: top;
            background: #c2c2c2;
            position: relative;
        }
        .step-item-tail-done {
            background: #009688 !important;
        }

        .step-item-head {
            position: relative;
            display: inline-block;
            height: 26px;
            width: 26px;
            text-align: center;
            vertical-align: top;
            color: #009688;
            border: 1px solid #009688;
            border-radius: 50%;
            background: #ffffff;
        }

        .step-item-head.step-item-head-active {
            background: #009688;
            color: #ffffff;
        }

        .step-item-main {
            background: #ffffff;
            display: block;
            position: relative;
        }

        .step-item-main-title {
            font-weight: bolder;
            color: #555555;
        }
        .step-item-main-desc {
            color: #aaaaaa;
        }
    </style>
</head>
<body>

<div id="steps"></div>


<script src="./layui/layui.js"></script>
<script>
    layui.config({
        base: 'extends/'
    });

    layui.use('steps', function () {
        var steps = layui.steps;

        var data = [
            {'title': "第一步", "desc": "2018-07-01 10:24:42"},
            {'title': "第二步", "desc": "2018-07-01 10:44:42"},
            {'title': "第三步", "desc": "2018-07-01 10:44:42"},
            {'title': "第四步", "desc": "2018-07-01 10:44:42"}
            ];

        steps.make(data, '#steps', 2);
    });
</script>

</body>
</html>